<script lang="ts" setup>
import officialTop from './official-top.vue';
import MemberInfoViewer from '@/views/common/member-info-viewer/index.vue';
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { IContributorVo } from '@/api/dto/contributors';
import { ITeamVo } from '@/api/dto/teams';
import { queryContributors } from '@/api/contributors';
import { queryTeams } from '@/api/teams';
import sleep from '@/utils/sleep';

const currentIndex = ref<number>(1);
const contributorCount = ref<number>(0);
const teamCount = ref<number>(0);
const tabClick = async (index: number) => {
  window.document.removeEventListener('scroll', handler);
  currentIndex.value = index;
  if (currentIndex.value === 1) {
    window.location.href = '#team';
  } else {
    window.location.href = '#contributor';
  }
  await sleep(100);
  window.document.addEventListener('scroll', handler);
};
const contributorRef = ref<HTMLElement>();
// 贡献者,团队信息
const contributors = ref<IContributorVo[]>([]);
const teams = ref<ITeamVo[]>([]);
const handler = () => {
  if (!contributorRef.value) {
    return;
  }
  const { top } = contributorRef.value.getBoundingClientRect();
  const capRatio = 56 / 375;
  if (top <= capRatio * window.screen.width) {
    currentIndex.value = 2;
  } else {
    currentIndex.value = 1;
  }
};
onMounted(() => {
  window.document.addEventListener('scroll', handler);
});
onMounted(async () => {
  try {
    contributors.value = await queryContributors();
    contributorCount.value = contributors.value.length;
    teams.value = await queryTeams();
    teamCount.value = teams.value.length;
  } catch (err) {
    console.warn(err.message);
  }
});
onBeforeUnmount(() => {
  window.document.removeEventListener('scroll', handler);
});
</script>
<template>
  <official-top/>
  <div class="contributor">
    <div class="bg-card">
      <div class="bg-title">建木贡献者</div>
      <div class="desc">
        反馈问题，提交代码，和建木社区相互促进、共同成长。
      </div>
    </div>
    <a href="https://gitee.com/jianmu-dev/governance#%E8%B4%A1%E7%8C%AE%E8%80%85"
       target="_blank">
      <div class="btn">
        成为贡献者
      </div>
    </a>
    <div class="tabs">
      <div :class="['item',currentIndex===1?'active':'']" @click="tabClick(1)">团队</div>
      <div :class="['item',currentIndex===2?'active':'']" @click="tabClick(2)">贡献者</div>
    </div>
    <div class="split-line"></div>
    <div class="part">
      <div class="anchor" id="team"></div>
      <div class="title team">团队・{{ teamCount }}</div>
      <div class="team-wrapper">
        <div class="team-container" v-if="teams.length>0">
          <div class="team-card" v-for="(item,index) in teams" :key="index">
            <div class="team-name">{{ item.name }}</div>
            <div class="team-desc">{{ item.purpose }}</div>
            <div class="team-members">
              <div class="team-member" v-for="(m,i) in item.members?.slice(0,4)" :key="i">
                <member-info-viewer
                  customizeClass="team-item-viewer"
                  :name="m"
                  :contributors="contributors"/>
              </div>
              <router-link :to="{name:'team-detail',query:{teamName:item.name}}" v-if="item.members?.length>=5">
                <div class="more-btn">
                  <div class="circle">
                    <div class="more-icon"></div>
                  </div>
                  <div class="name">更多</div>
                </div>
              </router-link>
            </div>
          </div>
        </div>
        <div class="empty" v-else>
          <el-empty>
            <template #image>
              <img src="~@/assets/wap/svgs/no-team.svg" alt="">
            </template>
            <template #description>
              暂无团队
            </template>
          </el-empty>
        </div>
      </div>
    </div>
    <div class="split-line">
    </div>
    <div class="part" ref="contributorRef">
      <div class="anchor" id="contributor"></div>
      <div class="title contributor"><span>贡献者・{{ contributorCount }}</span><span class="prompt">按Gitee用户名升序排序</span>
      </div>
      <div class="contributor-wrapper">
        <div class="contributor-container" v-if="contributors.length>0">
          <div class="contributor-item" v-for="(item,index) in contributors" :key="index">
            <member-info-viewer
              customizeClass="contributor-item-viewer"
              :name="item.username"
              :contributors="contributors"
            />
          </div>
        </div>
        <div class="empty" v-else>
          <el-empty>
            <template #image>
              <img src="~@/assets/wap/svgs/no-contributor.svg" alt="">
            </template>
            <template #description>
              暂无贡献者
            </template>
          </el-empty>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less">
.contributor {
  width: 750px;

  .empty {
    .el-empty {
      padding: 0;

      .el-empty__image {
        width: 72px;
        height: 72px;
      }

      .el-empty__description {
        margin-top: 5px;
        color: #8095A9;
        font-size: 24px;
        font-weight: 400;
      }
    }
  }

  .bg-card {
    background-image: url("@/assets/wap/pngs/bg-1.png");
    background-size: 100%;
    width: 690px;
    height: 260px;
    margin: 30px auto 40px;
    padding-top: 60px;

    .bg-title {
      color: #012C53;
      font-size: 36px;
      font-weight: 600;
      margin: 0 0 14px 30px;
    }

    .desc {
      width: 352px;
      font-weight: 400;
      color: #385775;
      font-size: 24px;
      margin-left: 30px;
    }
  }

  .btn {
    width: 690px;
    height: 94px;
    margin: 0 auto;
    background-color: #096DD9;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 30px;
    font-weight: 600;
  }

  .tabs {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 2;
    padding: 0 30px;
    height: 110px;
    display: flex;
    align-items: center;

    .item {
      font-size: 36px;
      font-weight: 400;
      color: #7B8C9C;
      position: relative;

      &.active {
        color: #096DD9;

        &::after {
          position: absolute;
          top: 75px;
          left: 50%;
          transform: translateX(-50%);
          content: '';
          width: 50%;
          height: 5px;
          background-color: #096DD9;
          border-radius: 3px;
        }
      }

      &:nth-child(2) {
        margin-left: 60px;
      }
    }
  }

  .split-line {
    height: 22px;
    width: 100%;
    background-color: #F7F9FD;
  }

  .part {
    padding-top: 22px;
    background-color: #fff;
    position: relative;

    .anchor {
      position: absolute;
      top: -110px;
      left: 0;
      opacity: 0;
      height: 110px;
      width: 100%;
      z-index: -1;
    }

    .title {
      padding: 0 30px;
      font-size: 30px;
      font-weight: 500;
      color: #042749;

      &.contributor {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .prompt {
          color: #8095A9;
          font-weight: 400;
          font-size: 26px;
        }
      }

      &.team {
        margin-bottom: 30px;
      }
    }

    .contributor-wrapper {
      padding: 30px 30px 40px;

      .contributor-container {
        display: flex;
        flex-wrap: wrap;

        .contributor-item {
          font-size: 24px;
          width: 210px;
          height: 190px;
          box-sizing: border-box;
          margin: 0 30px 30px 0;
          box-shadow: 0px 5px 9px 0px rgba(204, 210, 218, 0.1);
          border-radius: 10px;
          border: 1px solid #EAEEF2;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .contributor-item-viewer {
            width: 80px;
            height: 80px;
            font-size: 24px;
          }

          .member-info-viewer {
            width: 90%;
          }

          &:nth-child(3n) {
            margin-right: 0;
          }
        }
      }
    }

    .team-wrapper {
      padding: 0 30px 40px;
    }

    .team-card {
      width: 690px;
      margin: 30px auto 0;
      padding: 30px 20px;
      border: 1px solid #EAEEF2;

      .team-name {
        font-size: 30px;
        font-weight: 400;
        color: #042749;
      }

      .team-desc {
        font-weight: 400;
        color: #8095A9;
        font-size: 24px;
        margin: 10px auto 30px;
      }

      .team-members {
        display: flex;
        align-items: center;

        a {
          text-decoration: none;
        }

        .team-member {
          font-size: 24px;
          display: flex;
          margin-right: calc((100% - 400px) / 4);
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .team-item-viewer {
            width: 80px;
            height: 80px;
            font-size: 24px;
          }

          &:last-child {
            margin-right: 0;
          }

          //.member-info-viewer {
          //  width: 90%;
          //}
        }

        .more-btn {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .circle {
            flex-shrink: 0;
            width: 80px;
            height: 80px;
            background-color: #EBF4FF;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;

            .more-icon {
              width: 32px;
              height: 32px;
              background-image: url("@/assets/wap/svgs/ellipisis.svg");
              background-size: 100%;
            }
          }

          .name {
            font-size: 24px;
            font-weight: 400;
            color: #8095A9;
            margin-top: 3px;
          }
        }
      }
    }
  }
}
</style>
